<template>
  <div class="user_list">
    <div class="list_header">
      <div class="user_label">用户</div>
      <div class="bctype_label" style="margin-left: 26px">平台</div>
    </div>

    <div class="list_content" v-if="userlist.length > 0">
      <el-scrollbar height="calc( 100vh - 300px )">
        <div class="item" v-for="(item, index) in userlist" :key="index" @click="clickItem(item)"
          :style="activeuser.user_name == item.user_name ? 'background-color: rgba(20, 198, 193, 0.1);' : ''">
          <div class="user_label">
            <div class="status">
              <img v-if="item.status == 1" style="width: 12px; height: 12px" src="@/assets/kandan/online.png" alt="" />
              <img v-else style="width: 12px; height: 12px" src="@/assets/kandan/offline.png" alt="" />
            </div>
            <div class="name">{{ item.user_name }}</div>
          </div>
          <div class="bctype_label">
            <div class="type_name">{{ bctypeLabel(item.bc_type) }}</div>
            <div class="edit">
              <div class="edit-rad" v-if="item.new_order_count != 0">{{ item.new_order_count }}</div>
            </div>
            <div class="edit2">
              <img v-if="item.status == 1" @click.stop="userloginout(item)" style="width: 20px; height: 20px" src="@/assets/kandan/exit.png"
                alt="" />
                <img v-if="item.status == 0" @click.stop="userloginout(item)" style="width: 16px; height: 16px" src="@/assets/kandan/logo.png"
                alt="" />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div v-else style="width: 100%; height: 100%; display: flex; justify-content: center">
      <el-empty :image-size="100" description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { http } from '@/utils/http'
import { inject } from 'vue'

const props = defineProps({
  userlist: Array,
  activeuser: Object,
})
const emits = defineEmits()
const allbctype = inject('allbctype')

const bctypeLabel = bctype => {
  let a = ''
  allbctype.value.forEach(item => {
    if (item.bc_type == bctype) {
      a = item.name
    }
  })
  return a
}

const userloginout = row => {
  if (row.status == 1) {
    let body = {
      user_name: row.user_name,
      bc_type: row.bc_type,
    }
    http.post('/read_list/agent_logout', body).then(res => {
      emits('changeRefresh')
    })
  } else {
    console.log(row);
    let body = {
      user_name: row.user_name,
      pass_word: row.pass_word,
      bc_type: row.bc_type,
      proxy_ip_id: row.proxy_ip.id,
    }
    http.post('/read_list/agent_login', body).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
    
  }


}

const clickItem = row => {
  emits('change', row)
}
</script>

<style lang="scss" scoped>
.user_list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.list_header {
  display: flex;
  height: 28px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  align-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #7f908f;

  .user_label,
  .bctype_label {
    display: flex;
    align-items: center;
  }
}

.user_label {
  width: 130px;
  padding-left: 12px;
}

.bctype_label {
  width: 120px;
}

.list_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;

  .item {
    height: 36px;
    min-height: 36px;
    display: flex;
    cursor: pointer;

    .user_label {
      display: flex;
      font-size: 14px;
      font-weight: bold;
      color: #000;
      align-items: center;

      .name {
        margin-left: 12px;
      }
    }

    .bctype_label {
      font-size: 12px;
      color: #7f908f;
      margin-left: 10px;
      display: flex;
      align-items: center;

      .type_name {
        width: 92px;
      }

      .edit {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .edit-rad {
          width: 16px;
          height: 16px;
          text-align: center;
          border-radius: 50%;
          background-color: #ff2e4d;
          font-size: 12px;
          font-weight: bold;
          line-height: 16px;
          color: #fff;
        }
      }

      .edit2 {
        display: none;
      }
    }
  }

  .item:hover {
    background-color: rgba(20, 198, 193, 0.1);

    .bctype_label {
      background-image: linear-gradient(to right, rgba(230, 249, 248, 0), #e6f9f8 60%) !important;
    }

    .edit {
      display: none;
    }

    .edit2 {
      display: flex;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
